<template>
  <div>
    <button @click="countClick">count:{{ count }}</button>
    <button>readOnlyDoubleCount: {{ readOnlyDoubleCount }}</button>
    <button @click="dobleClick">doubleCount: {{ doubleCount }}</button>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
const count = ref(0);
const countClick = () => {
  count.value++;
};
// 计算属性的计算函数应只做计算而没有任何其他的副作用
// 接受一个 getter 函数，返回一个只读的响应式 ref 对象
const readOnlyDoubleCount = computed(() => count.value * 2);
// 接收一个带有get和set的对象，返回一个可写的计算属性 ref：
const doubleCount = computed({
  get() {
    return count.value * 2;
  },
  set(newCount) {
    console.log(1, newCount);
    count.value = newCount;
  },
});
const dobleClick = () => {
  doubleCount.value += 1;
};
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
